<template>
    <section class="section section-shaped section-lg my-0">
        <div class="shape shape-style-1 bg-gradient-default">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>

        <div v-if="showError" class="contentDiv">
            <base-alert type="danger">
                {{errorMsg}}
            </base-alert>
        </div>
        <div v-if="showInfo" class="contentDiv">
            <base-alert class="col-md-6" type="dark">
                {{infoMsg}}
            </base-alert>
        </div>
        <div class="container pt-lg-md">
            <div class="row justify-content-center">
                <div class="col-lg-12">
                    <card type="secondary" shadow
                          header-classes="bg-white pb-5"
                          body-classes="px-lg-5 py-lg-5"
                          class="border-0">
                        <orders v-for="(result,index) in results" :key="index" :msg="result"></orders>
                    </card>
                </div>
            </div>
        </div>
    </section>
</template>
<script>
    import orders from "./components/orders";
    import {userOrders} from "../api";

    export default {
        data() {
            return{
                results: [],
                showError: false,
                showInfo: false,
                errorMsg: '',
                infoMsg: ''
            }
        },
        methods: {
            getHouseList(){
                this.showError = this.showInfo = false;
                userOrders()
                    .then(res => {
                        console.log("userOrders", res.data);
                        this.results = res.data;
                        if (this.results === null || this.results.length === 0){
                            this.showInfo = true;
                            this.infoMsg = '您没有订单';
                        }
                    })
                    .catch(err => {
                        this.showError = true;
                        this.errorMsg = err;
                        return false;
                    })
            }
        },
        watch: {
            "$route": "getHouseList"
        },
        created(){
            this.getHouseList();
        },
        components: {
            orders,
        }
    };
</script>
<style>
.contentDiv{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    margin: auto;
}
</style>
